<template>
  <div class="jioninfo-dialog">
    <el-dialog
      v-model="dialogVisible"
      @open="onOpen"
      @close="onClose"
      title="申请详情"
    >
    <el-row>
      <el-col :span='2'>活动名称：</el-col>
      <el-col :span='20'>{{info.proName}}</el-col>
    </el-row>
    <el-row>
      <el-col :span='2'>姓名：</el-col>
      <el-col :span='20'>{{info.userName}}</el-col>
    </el-row>
    <el-row>
      <el-col :span='2'>指导老师：</el-col>
      <el-col :span='20'>{{info.teacherName}}</el-col>
    </el-row>
    <el-row>
      <el-col :span='2'>备注：</el-col>
      <el-col :span='20'>{{info.remark}}</el-col>
    </el-row>
     <el-row>
      <el-col :span='2'>审核状态：</el-col>
      <el-col :span='20'>{{info.statusName}}</el-col>
    </el-row>
    <el-row>
      <el-col :span='2'>审核意见：</el-col>
      <el-col :span='20'><div v-html="info.opinion"></div></el-col>
    </el-row>
      <template #footer>
        <el-button @click="close">取消</el-button>
        <!-- <el-button type="primary" @click="handelConfirm">确定</el-button> -->
      </template>
    </el-dialog>
    <MemberList
      v-model="memberDialogVisible"
      @confirm="addTeacher"
      :checkedList="formData.teacherList"
    ></MemberList>
  </div>
</template>
<script setup>
import useActivityStore from "@/store/modules/activity";
import { getToken } from "@/utils/auth";
import { getProjectInfo, getJoinInfo } from "@/api/pms/project";
import MemberList from "./memberList.vue";

const headers = ref({
  Authorization: "Bearer " + getToken(),
});
const baseURL = import.meta.env.VITE_APP_BASE_API;
const { proxy } = getCurrentInstance();
const props = defineProps({
  currentProId: { type: String, default: "" },
  currentAuditId: { type: String, default: "" },
});
const formRef = ref();
const ruleFormRef = ref();
const info = ref({})
const labelConfig = {
  name: {
    2: "课程名称",
    3: "实验名称",
    4: "项目名称",
    24: "竞赛名称",
    25: "成长营名称",
    26: "活动名称",
  },
  teacher: {
    2: "主讲人",
    3: "负责人",
    4: "负责人",
    24: "负责人",
    25: "负责人",
    26: "负责人",
  },
  text: {
    2: "课程介绍",
    3: "实验介绍",
    4: "项目介绍",
    24: "竞赛介绍",
    25: "研学特色",
    26: "活动介绍",
  },
  proTime: {
    2: "课程时间",
    3: "实验时间",
    4: "项目时间",
    24: "比赛时间",
    25: "研学时间",
    26: "活动时间",
  },
  img: {
    2: "课程封面",
    3: "实验封面",
    4: "项目封面",
    24: "比赛封面",
    25: "研学封面",
    26: "活动封面",
  },
};
const data = reactive({
  formData: {
    proName: "",
    proType: "",
    projectTime: null,
    registrationType: "1",
    registrationTime: null,
    title: undefined,
    imgUrl: null,
    bannerUrl: null,
    teacherList: [],
    isRange: "1",
    chargePerson: "",
  },
  rules: {
    proName: [
      {
        required: true,
        message: "请输入活动名称",
        trigger: "blur",
      },
    ],
    proType: [
      {
        required: true,
        message: "请选择活动类型",
        trigger: "change",
      },
    ],
    projectTime: [
      {
        required: true,
        message: "活动时限不能为空",
        trigger: "change",
      },
    ],
    title: [],
    Info: {},
  },
});
const { formData, rules } = toRefs(data);
const proTypeOptions = ref([]);
const sponsor = ref(""); //主办方
const memberDialogVisible = ref(false);
// 上传请求路径
const imgUrlAction = ref(import.meta.env.VITE_APP_BASEURL + "/common/upload");
// 上传文件列表
const imgUrlfileList = ref([]);
// 上传版头图文件列表
const bannerUrlfileList = ref([]);
// 上传文件列表
const fileList = ref([]);
/**
 * @name: 上传之前的文件判断
 * @description: 上传之前的文件判断，判断文件大小文件类型等
 * @param {*} file
 * @return {*}
 */
function imgUrlBeforeUpload(file) {
  let isRightSize = file.size / 1024 / 1024 < 2000;
  if (!isRightSize) {
    proxy.$modal.msgError("文件大小超过 2G");
  }
  let isAccept = new RegExp("image/*").test(file.type);
  if (!isAccept) {
    proxy.$modal.msgError("应该选择image/*类型的文件");
  }
  return isRightSize && isAccept;
}
function bannerUrlBeforeUpload(file) {
  let isRightSize = file.size / 1024 / 1024 < 2000;
  if (!isRightSize) {
    proxy.$modal.msgError("文件大小超过 2G");
  }
  let isAccept = new RegExp("image/*").test(file.type);
  if (!isAccept) {
    proxy.$modal.msgError("应该选择image/*类型的文件");
  }
  return isRightSize && isAccept;
}
function fileListBeforeUpload(file) {
  let isRightSize = file.size / 1024 / 1024 < 2000;
  if (!isRightSize) {
    proxy.$modal.msgError("文件大小超过 2G");
  }
  return isRightSize;
}
// 弹窗设置
const dialogVisible = defineModel();
// 弹窗确认回调
const emit = defineEmits(["confirm"]);
/**
 * @name: 弹窗打开后执行
 * @description: 弹窗打开后执行方法
 * @return {*}
 */
async function onOpen() {
  proTypeOptions.value = await useActivityStore().getType();
  if (props.currentAuditId) {
    getList();
  }
}
//修改时初始化
function getList() {
  getJoinInfo({ id: props.currentAuditId }).then((response) => {
    info.value = response.data;
  });
}
/**
 * @name: 弹窗关闭时执行
 * @description: 弹窗关闭方法，重置表单
 * @return {*}
 */
function onClose() {
}
/**
 * @name: 弹窗取消
 * @description: 弹窗取消方法
 * @return {*}
 */
function close() {
  dialogVisible.value = false;
}

// 添加教师弹窗打开
function addTeacherShow() {
  memberDialogVisible.value = true;
}
// 添加教师
function addTeacher(params) {
  formData.value.teacherList = params.map((item) => {
    let i = {
      id: item.id,
      username: item.username,
    };
    return i;
  });
}
/**
 * @name: 弹窗表单提交
 * @description: 弹窗表单提交方法
 * @return {*}
 */
function handelConfirm() {
  formRef.value.validate((valid) => {
    if (!valid) return;
    // TODO 提交表单
    if (!formData.value.proName.trim()) {
      proxy.$modal.msgError("活动名称不能为全空格");
      return false;
    }
    if (
      formData.value.registrationType == "1" &&
      !formData.value.registrationTime
    ) {
      proxy.$modal.msgError("请填写报名时间");
      return false;
    }
    let params = {
      proName: formData.value.proName,
      isRange: formData.value.isRange,
      proType: formData.value.proType,
      chargePerson: formData.value.chargePerson,
      registrationType: formData.value.registrationType,
      registrationStartTime:
        formData.value.registrationType == "1"
          ? formData.value.registrationTime[0]
          : "",
      registrationEndTime:
        formData.value.registrationType == "1"
          ? formData.value.registrationTime[1]
          : "",
      startTime: formData.value.projectTime[0],
      endTime: formData.value.projectTime[1],
      teacherList: JSON.parse(JSON.stringify(formData.value.teacherList)),
      url: formData.value.imgUrl,
      banner: formData.value.bannerUrl,
      title: formData.value.title,
      id: props.currentProId ? props.currentProId : "",
      informations: [],
    };
    params.informations = fileList.value.map((item) => {
      let i = {
        url: item.response.url,
        fullurl: item.response.fullurl,
        name: item.response.name,
      };
      return i;
    });
    // 回调父级组件
    emit("confirm", params);
    close();
  });
}
function handleUploadSuccess(res) {
  if (res) {
    formData.value.imgUrl = res.fullurl;
  }
}
function handleUploadSuccessFile(res) {}
function handleBannerUploadSuccess(res) {
  if (res) {
    formData.value.bannerUrl = res.fullurl;
  }
}
//当编辑器的内容更新时，获取该值
const getRich = function (value) {
  formData.value.title = value;
};
</script>
<style lang="scss">
.el-upload__tip {
  line-height: 1.2;
}
.file-tip {
  padding-left: 100px;
  color: red;
  margin-bottom: 5px;
  margin-top: 12px;
  display: inline-block;
}
.jioninfo-dialog {
  .el-dialog {
    .el-dialog__body {
      height: 70vh;
      overflow-y: auto;
      .el-row{
        padding: 10px 0;
      }
    }
  }
}
</style>
